<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
    <title></title>

    <link href="./public/h5/css/all.css" rel="stylesheet" type="text/css">
    <link href="./public/h5/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./public/h5/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">

</head>

<body>
    <div class="div_find">

        <label class="find_labela">当前数据库：</label>
        <select class="find_input" id="myselect_db">

            <%if(!results.db_name || results.db_name === ''){ %>
                <option>请选择数据库</option>
                <%}%>
            <%const db_list = results.db_list;%>
            <% for(let i=db_list.length - 1; i>0; i--) {%>
                <%if(results.db_name === db_list[i].Database){%>
                    <option selected="selected">
                       <%=db_list[i].Database %>
                    </option>
                <%}else{%>
                    <option>
                         <%=db_list[i].Database %>
                    </option>
                <%}%>
            <%}%>


        </select>
        <label class="find_labela">当前表格：</label><select class="find_input" id="myselect_tab">
            <%const table_list = results.tab_list;%>   
            <%if(results.tab_name === ''){%>
                <option>请选择表格</option>
                <%}%>             
            <%if(table_list.length === 0){%>
                <option>请选择表格</option>
                <%}else{%>
            <% for(let i=table_list.length - 1; i>0; i--) {%>
                <%if(results.tab_name === table_list[i].table_name){%>
                    <option selected = "selected"><%=table_list[i].table_name+(table_list[i].table_comment ? '('+table_list[i].table_comment+')' : '') %></option>
                <%}else{%>
                    <option><%=table_list[i].table_name+(table_list[i].table_comment ? '('+table_list[i].table_comment+')' : '') %></option>
                
                    <%}%>
                <%}%>
                <%}%>
    
        </select>
    </div>
    <p>
            <table id="table" class="table_style" style="margin: 0 auto" data-toolbar="#toolbar">
                    <!-- <tr><td><input type='checkbox'/></td><td>数据库</td><td>操作</td></tr> -->
                    <%const data = results.data%>
                    <%const columns = results.columns_key%>
                    <%if(data && data.length > 0){%>
                        <% for(let i=data.length - 1; i>0; i--) {%>
                        <tr>
                            <td><input type='checkbox' /></td>
                            <td>
                                    <%=i %>
                            </td>
                            <% for(let y=0; y<columns.length; y++){%>
                                <td>
                                        <%=JSON.stringify(data[i][columns[y].column_name]) %>
                                       
                                    </td>
                                <%}%>
   
                        </tr>
            
                        <%}%>
                        <%}else{%>
                            暂无数据！
                            <%}%>
                </table>
    </p>
<style>

    
.colStyle {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>
    <script src="./public/h5/js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="./public/h5/js/bstable/js/bootstrap.min.js"></script>
    <script src="./public/h5/js/bstable/js/bootstrap-table.js"></script>
    <script src="./public/h5/js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="./public/h5/js/date/js/laydate.js"></script>
    <script>
        $("#myselect_db").change(function () {
            const db_name = $("#myselect_db").val();
            document.location.href = `/table_data_list.html?db_name=${db_name}`
        });
        $("#myselect_tab").change(function () {
            const db_name = $("#myselect_db").val();
            let tab_name = $("#myselect_tab").val();
            const tab_names = tab_name.split('(');
            tab_name = tab_names[0]
            document.location.href = `/table_data_list.html?db_name=${db_name}&tab_name=${tab_name}`
        });
        function chooseDB(db_name) {
            //localStorage.setItem('db_name', db_name);
            setCookies('db_name', db_name, 0);
            document.location.reload();
        }
    </script>
    <script>
        !function () {
            laydate.skin('danlan');//切换皮肤，请查看skins下面皮肤库
            laydate({ elem: '#demo' });
            laydate({ elem: '#demo1' });//绑定元素
        }();
    </script>

    <script type="text/javascript">
    const columns_ejs = '<%=results.columns ? results.columns.length : 0%>';
    // console.log(columns_ejs)
    if(columns_ejs.length > 0){
        let columns = JSON.parse('<%- JSON.stringify(results.columns) %>')
     

        $(function () {
            $('#table').bootstrapTable({
                // method: "get",
                toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,
                singleSelect: false,
                // url: "json/allFind.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true, //显示搜索框
                // strictSearch: true,
                showRefresh: true,                  //是否显示刷新按钮
                // clickToSelect: true,                //是否启用点击选中行
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                cardView: true,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                contentType: "application/x-www-form-urlencoded",
                queryParams: null,
                // uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                // sortable: true,      //是否启用排序
                // sortOrder: "desc",     //排序方式
                columns: columns
            });
        })
    }
        

    </script>
    <script src="./public/h5/js/layer_v2.1/layer/layer.js"></script>
    <script>
        function openlayer(id) {
            layer.open({
                type: 2,
                title: '意见填写',
                shadeClose: true,
                shade: 0.5,
                skin: 'layui-layer-rim',
                //            maxmin: true,
                closeBtn: 1,
                area: ['98%', '92%'],
                shadeClose: true,
                closeBtn: 1,
                content: 'feedBook.html'
                //iframe的url
            });
        }
        // function openlayer(id) {
        //     layer.open({
        //         type: 2,
        //         title: '添加信息',
        //         shadeClose: true,
        //         shade: 0.5,
        //         skin: 'layui-layer-rim',
        //         //            maxmin: true,
        //         closeBtn: 1,
        //         area: ['98%', '92%'],
        //         shadeClose: true,
        //         closeBtn: 1,
        //         content: 'lay01.html'
        //         //iframe的url
        //     });
        // }
    </script>
    <script>
        $(function () {
            $(".find_span").click(function () {
                $("#open").show();
                $(this).hide();
                $(".find_span1").show();
                $("#but_close02").hide();
                $("#but_open").hide();

            })
            $(".find_span1").click(function () {
                $("#open").hide();
                $(this).hide();
                $(".find_span").show();
                $("#but_open").show();
                $("#but_close02").show();

            })

        })
    </script>

</body>

</html>